<template>
  <a-space style="font-size: 16px; margin: 0 8px">
    <a-tooltip :title="t('refresh')">
      <ReloadOutlined class="btn" :spin="loading" @click="handleReload" />
    </a-tooltip>
    <a-dropdown :trigger="['click']">
      <a-tooltip :title="t('size')">
        <ColumnHeightOutlined class="btn" />
      </a-tooltip>
      <template #overlay>
        <a-menu :selected-keys="[size]" @click="handleMenuClick">
          <a-menu-item v-for="item in sizes" :key="item.value">
            <span> {{ item.label() }} </span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <operation-setting
      :columns="columns"
      @update:columns="(v) => emit('update:columns', v)"
      :selected-keys="selectedKeys"
      @update:selected-keys="(v) => emit('update:selected-keys', v)"
    />
  </a-space>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { MenuProps, TableColumnsType } from "ant-design-vue";
import type { SizeType } from "ant-design-vue/es/config-provider";
import OperationSetting from "./operation-setting.vue";
import { useI18n } from "vue-i18n";

interface Props {
  /**大小 */
  size?: SizeType;
  /**表格列 */
  columns: TableColumnsType;
  /**选中列 */
  selectedKeys: string[];
}
defineProps<Props>();
const emit = defineEmits([
  "reload",
  "update:size",
  "update:columns",
  "update:selected-keys",
]);
const { t } = useI18n();
// 刷新
const loading = ref(false);
const handleReload = () => {
  loading.value = true;
  emit("reload");
  setTimeout(() => {
    loading.value = false;
  }, 900);
};

// 大小
const sizes = reactive([
  { label: () => t("default"), value: "default" },
  { label: () => t("middles"), value: "middle" },
  { label: () => t("compact"), value: "small" },
]);
const handleMenuClick: MenuProps["onClick"] = ({ key }) => {
  emit("update:size", key);
};
</script>
<style lang="less" scoped>
.btn {
  cursor: pointer;
}
</style>
